<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍列表页</title>
    <jsp:include page="/public/inc/head.jsp"/>
    <script type="text/javascript">
        var $table;
        $(function() {
            $(document).on('focus', 'input[type="text"]', function() {
                $(this).parent().find('label').addClass('active');
            }).on('blur', 'input[type="text"]', function() {
                if ($(this).val() === '') {
                    $(this).parent().find('label').removeClass('active');
                }
            });

            UE.getEditor('content');

            $('#book_activity_end_time').datetimepicker({
                language: "zh-CN",
                format: "yyyy-mm-dd hh:ii:ss",
                autoclose: true,
                startView: 'month',
                todayHighlight: true,
                showMeridian: true,
                todayBtn: true
            });

            $("#form1").bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    copywriter: {
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            },
                            stringLength: {
                                max: 20,
                                message: '长度过长'
                            },
                            regexp: {
                                regexp: /^\+?(0|[1-9][0-9]*)$/,
                                message: '非负整数'
                            }
                        }
                    },
                    bookname: {
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            }
                        }
                    },
                    bookauthor: {
                        validators: {
                            notEmpty: {
                                message: '不能为空'
                            }
                        }
                    },
                    bookprice: {
                        validators: {
                            regexp: {
                                regexp: /^(([1-9]\d*)|0)(\.\d{1,2})?$/,
                                message: '只能输入不超过两位小数的正实数'
                            }
                        }
                    }
                }
            });

            // bootstrap table初始化
            $table = $('#table').bootstrapTable({
                url: '/system/wwdx_book/list',
                striped: true,                      //是否显示行间隔色
                pagination: true,                   //是否显示分页（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                paginationPreText:'上一页',
                paginationNextText:'下一页',
                cache: false,
                uniqueId: "id",                     //每一行的唯一标识，一般为主键列
                paginationLoop: false,
                smartDisplay: false,
                toolbar: '#toolbar',
                //得到查询的参数
                queryParams : function (params) {
                    //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                    return {
                        rows: params.limit,                         //页面大小
                        page: (params.offset / params.limit) + 1,   //页码
                        sort: params.sort,      //排序列名
                        sortOrder: params.order //排位命令（desc，asc）
                    };
                },
                columns: [
                    {field: 'state', checkbox: true},{
                        title : '序号',
                        align: "center",
                        width: 40,
                        formatter: function (value, row, index) {
                            //获取每页显示的数量
                            var pageSize = $table.bootstrapTable('getOptions').pageSize;
                            //获取当前是第几页
                            var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
                            //返回序号，注意index是从0开始的，所以要加上1
                            return pageSize * (pageNumber - 1) + index + 1;
                        }
                    },
                    {field: 'bookimg', title: '封面',
                        formatter:function (value) {
                            return "<img src=\"http://img.readerday.com/cover/"+value+"\" style=\"height: 70px;width: 70px;\">";
                        }
                    },
                    {field: 'bookid', title: '编号'},
                    {field: 'bookname', title: '名称'},
                    {field: 'status', title: '启用',
                        formatter:function (value) {
                            if (value === 0){
                                return "<span class=\"btn btn-primary btn-xs\">是</span>";
                            }else {
                                return "<span class=\"btn btn-danger btn-xs\">否</span>";
                            }
                        }
                    },
                    {field: 'gmt_created', title: '创建时间'}
                ]
            });
        });

        // 新增
        function createAction() {
            $.confirm({
                type: 'dark',
                animationSpeed: 300,
                title: '新增系统',
                content: $('#createDialog').html(),
                buttons: {
                    formSubmit: {
                        text: '确认',
                        btnClass: 'waves-effect waves-button',
                        action: function () {
                            //var bookname = this.$content.find('#bookname').val();
                            var serialize = this.$content.find("#form1").serialize();
                            console.info(serialize);
                            $.alert('确认');
                        }
                    },
                    cancel: {
                        text: '取消',
                        btnClass: 'waves-effect waves-button'
                    }
                }
            });
        }
        // 编辑
        function updateAction() {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length === 0) {
                $.confirm({
                    title: false,
                    content: '请至少选择一条记录！',
                    autoClose: 'cancel|3000',
                    backgroundDismiss: true,
                    buttons: {
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            } else {
                $.confirm({
                    type:'blue',
                    theme: 'material',
                    title: '编辑系统',
                    content: $('#createDialog').html(),
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button',
                            action: function () {
                                $.alert('确认');
                            }
                        },
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            }
        }
        // 删除
        function deleteAction() {
            var rows = $table.bootstrapTable('getSelections');
            if (rows.length === 0) {
                $.dialog({
                    title: '提示',
                    content: '请至少选择一条记录！'
                });
            } else {
                $.confirm({
                    type: 'red',
                    animationSpeed: 300,
                    title: false,
                    content: '确认删除该系统吗？',
                    buttons: {
                        confirm: {
                            text: '确认',
                            btnClass: 'waves-effect waves-button',
                            action: function () {
                                var ids = [];
                                $.each(rows,function (index, obj) {
                                    ids.push(obj.id);
                                });
                                $.alert('删除：id=' + ids.join("-"));
                            }
                        },
                        cancel: {
                            text: '取消',
                            btnClass: 'waves-effect waves-button'
                        }
                    }
                });
            }
        }
    </script>
</head>
<body>
<div id="header" class="navbar navbar-static-top" role="navigation">
    <jsp:include page="/public/inc/top.jsp"/>
</div>
<div class="container-fluid" style="margin-top:5px;margin-bottom:60px;">
    <div class="row">
        <jsp:include page="/public/inc/menu.jsp"/>
        <div class="col-xs-12 col-sm-10">
            <div id="toolbar">
                <label>
                    <select id="channel" name="channel" class="form-control">
                        <option value="">渠道</option>
                        <option value="ios">苹果</option>
                        <option value="android">安卓</option>
                        <option value="weixin">微信</option>
                    </select>
                </label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label>
                    <input class="form-control" id="name" name="name" placeholder="页面名称"/>
                </label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <label>
                    <input class="form-control date-picker" readonly id="date" name="date" size="10" placeholder="开始时间"/>
                </label>
                ~
                <label>
                    <input class="form-control date-picker" readonly id="date_end" name="date_end" size="10" placeholder="结束时间"/>
                </label>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="button" id="searchBtn" class="btn btn-default">筛选</button>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="reset" id="clearBtn" class="btn btn-default">清空</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a class="btn btn-primary" onclick="createAction();">
                    <span class="glyphicon glyphicon-plus"></span> 新增
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <a class="btn btn-primary" onclick="updateAction();">
                    <span class="glyphicon glyphicon-pencil"></span> 编辑
                </a>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <shiro:hasRole name="super">
                    <a class="btn btn-danger" onclick="deleteAction();">
                        <span class="glyphicon glyphicon-trash"></span> 删除
                    </a>
                </shiro:hasRole>
            </div>
            <table id="table"></table>
            <%--新增 | 编辑--%>
            <div id="createDialog" class="crudDialog" hidden>
                <form id="form1">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="control-label col-md-2">书籍名称</label>
                            <div class="col-md-10">
                                <input id="bookname" name="bookname" class="form-control" placeholder="请输入书籍名称"
                                       value="${model.bookname}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">统计参考值</label>
                            <div class="col-md-10">
                                <input type="text" id="reference_click_count" name="reference_click_count" class="form-control"
                                       placeholder="请输入"
                                       value="${model.reference_click_count}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">上传书籍图片</label>
                            <div class="col-md-10">
                                <input type="hidden" name="bookimg" value="${model.bookimg}"/>
                                <input type="file" class="btn btn-primary" id="bookimg" name="BookImg"/>
                                <img src="http://img.readerday.com/cover/${model.bookimg}" class="thumbnail" style="height: 200px;
                                <c:if test="${model.bookimg==null}">display: none;</c:if> ">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">书籍作者</label>
                            <div class="col-md-10">
                                <input type="text" id="bookauthor" name="bookauthor" class="form-control" placeholder="请输入书籍作者"
                                       value="${model.bookauthor}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">书籍出版社</label>
                            <div class="col-md-10">
                                <input type="text" id="bookpublish" name="bookpublish" class="form-control" placeholder="请输入书籍出版社"
                                       value="${model.bookpublish}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">一句话介绍</label>
                            <div class="col-md-10">
                                <input type="text" id="bookrecommend" name="bookrecommend" class="form-control" placeholder="请输入"
                                       value="${model.bookrecommend}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">推荐语</label>
                            <div class="col-md-10">
                                <input type="text" id="contentsummary" name="contentsummary" class="form-control" placeholder="请输入"
                                       value="${model.contentsummary}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">书籍现有价格</label>
                            <div class="col-md-10">
                                <input type="text" id="bookprice" name="bookprice" class="form-control" placeholder="请输入书籍现有价格"
                                       value="${model.bookprice}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">书籍原价格</label>
                            <div class="col-md-10">
                                <input type="text" id="bookoriginalprice" name="bookoriginalprice" class="form-control"
                                       placeholder="请输入书籍原价格"
                                       value="${model.bookoriginalprice}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">书籍字数描述</label>
                            <div class="col-md-10">
                                <input type="text" id="bookwrodnumber" name="bookwrodnumber" class="form-control" placeholder="请输入书籍字数描述"
                                       value="${model.bookwrodnumber}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">音频时长</label>
                            <div class="col-md-10">
                                <input type="text" id="videoduration" name="videoduration" class="form-control" placeholder="请输入音频时长"
                                       value="${model.videoduration}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">活动</label>
                            <div class="col-md-10">
                                <select name="book_activity" class="form-control">
                                    <option value="0">请选择</option>
                                    <option value="0" <c:if test="${model.book_activity==0}"> selected="selected"</c:if>>正常</option>
                                    <option value="1" <c:if test="${model.book_activity==1}"> selected="selected"</c:if>>上新</option>
                                    <option value="2" <c:if test="${model.book_activity==2}"> selected="selected"</c:if>>限免</option>
                                    <option value="3" <c:if test="${model.book_activity==3}"> selected="selected"</c:if>>折扣</option>
                                    <option value="4" <c:if test="${model.book_activity==4}"> selected="selected"</c:if>>热销</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">活动结束时间</label>
                            <div class="col-md-10">
                                <fmt:formatDate value="${model.book_activity_end_time}" pattern="yyyy-MM-dd HH:mm:ss"
                                                var="end_time"></fmt:formatDate>
                                <input type="text" readonly="readonly" id="book_activity_end_time" name="book_activity_end_time"
                                       class="form-control" placeholder="请输入活动结束时间"
                                       value="${end_time}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">试读</label>
                            <div class="col-md-10">
                                <select name="readable" class="form-control">
                                    <option value="0">请选择</option>
                                    <option value="0" <c:if test="${model.readable==0}"> selected="selected"</c:if>>否</option>
                                    <option value="1" <c:if test="${model.readable==1}"> selected="selected"</c:if>>是</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">上传思维导图</label>
                            <div class="col-md-10">
                                <input type="hidden" name="mapping_img" value="${model.mapping_img}"/>
                                <input type="file" class="btn btn-primary" id="mapping_img" name="MappingImg"/>
                                <img src="http://img.readerday.com/cover/${model.mapping_img}" class="thumbnail" style="height: 200px;
                                <c:if test="${model.mapping_img==null}">display: none;</c:if> ">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">上传思维导图(小图)</label>
                            <div class="col-md-10">
                                <input type="hidden" name="mapping_small_img" value="${model.mapping_small_img}"/>
                                <input type="file" class="btn btn-primary" id="mapping_small_img" name="MappingSmallImg"/>
                                <img src="http://img.readerday.com/cover/${model.mapping_small_img}" class="thumbnail" style="height: 200px;
                                <c:if test="${model.mapping_small_img==null}">display: none;</c:if> ">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-2">首页显示</label>
                            <div class="col-md-10">
                                <select name="ishost" class="form-control">
                                    <option value="0">请选择</option>
                                    <option value="0" <c:if test="${model.ishost==0}"> selected="selected"</c:if>>否</option>
                                    <option value="1" <c:if test="${model.ishost==1}"> selected="selected"</c:if>>是</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-2">状态</label>
                            <div class="col-md-10">
                                <select name="status" class="form-control">
                                    <option value="0">请选择</option>
                                    <option value="0" <c:if test="${model.status==0}"> selected="selected"</c:if>>上线</option>
                                    <option value="1" <c:if test="${model.status==1}"> selected="selected"</c:if>>下线</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="control-label col-md-2">撰稿人</label>
                            <div class="col-md-10">
                                <input type="text" id="copywriter" name="copywriter" class="form-control" placeholder="请输入撰稿人"
                                       value="${model.copywriter}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">音频转述师</label>
                            <div class="col-md-10">
                                <input type="text" id="videoauthorid" name="videoauthorid" class="form-control" placeholder="请输入音频转述师"
                                       value="${model.videoauthorid}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">排序</label>
                            <div class="col-md-10">
                                <input type="text" id="sort" name="sort" class="form-control" placeholder="请输入排序"
                                       value="${model.sort}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-md-2">内容简介</label>
                            <div class="col-md-10">
                                <textarea id="content" name="content" style="width:100%;height: 100px">${model.content}</textarea>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<jsp:include page="/public/inc/ueditor.jsp"/>
<jsp:include page="/public/inc/bottom.jsp"/>
</body>
</html>
